<script setup>
	import { computed, ref } from 'vue';
	import { useCartStore } from '@/store/cart';

	const cartStore = useCartStore( )
	// 检测购物车是否有数据
	const cartListTest = computed( ( ) => {
		return cartStore.cartData.length > 0 ? true : false
	} )
	// 当购物车数量发生改变时
	const changeNum = ( e ) => {
		console.log( e )
		// 如果数量为0，移除购物车数据
		if ( e.value <= 0 ) {
			cartStore.removeFromCart( e.name )
		}
	}
</script>
<template>
	<view class="cart">
		<up-empty marginTop="100" mode="car"
			icon="https://mp-25cc8794-9056-4536-a51b-6c5ab0bc5bd9.cdn.bspapp.com/emptyCart_no.png"
			text="快去添加您想要的商品吧" :show="!cartListTest">
		</up-empty>
		<!-- 购物车商品内容 -->
		<view class="cart_pro" v-for="item in cartStore.cartData" :key="item._id">
			<!-- 封面图 -->
			<view class="left">
				<view class="cover_pic">
					<image :src="item.cover_pic" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="right">
				<view class="name">
					{{item.name}}
				</view>
				<view class="sku">
					规格：无
				</view>
				<!-- 底部价格和步进器 -->
				<view class="caozuo">
					<view class="price">
						<up-text style="width: fit-content;flex: none;" color="#ed544f" mode="price" size="14"
							:text="item.buy_price"></up-text>
						<up-text style="width: fit-content;" class="original-price" mode="price" size="12"
							:text="item.original_price" color="#ababab" decoration="line-through"></up-text>
					</view>
					<!-- 步进器 -->
					<view class="number-box">
						<up-number-box :name="item.pro_id" v-model="item.num" :min="0" :showMinus="item.num>0"
							@change="changeNum">
							<template #minus>
								<view class="minus">
									<up-icon name="minus" size="12"></up-icon>
								</view>
							</template>
							<template #input>
								<text v-if="item.num>0" style="width: 50px;text-align: center;"
									class="input">{{item.num}}</text>
							</template>
							<template #plus>
								<view class="plus">
									<up-icon name="plus" color="#FFFFFF" size="12"></up-icon>
								</view>
							</template>
						</up-number-box>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部工具栏 -->
		<pay-foot v-if="cartStore.cartData.length" :type="0"></pay-foot>
	</view>
</template>
<style lang="scss">
	.cart {
		@include pageStyle;
		padding: 24rpx 24rpx 164rpx 24rpx;

		/*购物车商品列表*/
		.cart_pro {
			display: flex;
			margin-bottom: 32rpx;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 32rpx;

			/*封面图*/
			.left {
				.cover_pic {
					margin-right: 16rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 32rpx;
					overflow: hidden;
				}
			}

			/*商品信息*/
			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: $text-font-color-2;

				/*商品名*/
				.name {
					font-weight: 600;
				}

				.sku {
					font-size: 24rpx;
					color: $text-font-color-3;
				}

				.caozuo {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.price {
						display: flex;
					}

					/*步进器*/
					.number-box {
						.minus {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 44rpx;
							height: 44rpx;
							border-radius: 50%;
							border: 1px solid $text-font-color-4;
						}

						.input {
							padding: 0 20rpx;
							color: $text-font-color-2;
						}

						.plus {
							display: flex;
							width: 44rpx;
							height: 44rpx;
							background-color: $brand-theme-color;
							border-radius: 50%;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>